<template>
  <Drawer width="450px">
    <div class="container">
      <Outline />
      <Trade />
      <Warning />
    </div>
    <div class="box">
      <MapToolBox @zoomin="emits('zoomin')" @zoomout="emits('zoomout')" @locate="emits('locate')" @traffic="emits('traffic')" />
    </div>
  </Drawer>
</template>

<script setup lang="ts">
import Drawer from '../../../components/Drawer.vue'
import MapToolBox from './MapToolBox.vue'
import Outline from './Outline.vue'
import Trade from './Trade.vue'
import Warning from './Warning.vue'

const emits = defineEmits<{
  (e: 'zoomin'): void
  (e: 'zoomout'): void
  (e: 'locate'): void
  (e: 'traffic'): void
}>()
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.box {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateX(100%);
}
</style>
